<template>
    <tr>
        <template v-for="(item,index) in row" >
<!--            名字-->
            <td :key="'a'+index" class="name"
                v-if="showName"
                @click="changeSelect(item.id,index)"
                @mouseover="handleMouseOver(index)"
                @mouseout="handleMouseOut(index)"
                :class="{'bg_yellow':item.selected,'hover':item.hovering}">
                {{item.name}}
            </td>
<!--            数字-->
            <td :key="'n'+index" :data-id="item.id" :data-name="item.number"
                v-if="showNumbers"
                @click="changeSelect(item.id,index)"
                @mouseover="handleMouseOver(index)"
                @mouseout="handleMouseOut(index)"
                :class="{'bg_yellow':item.selected,'hover':item.hovering}">
                <i v-if="typeof (item.number) == 'string'" class="lhc_icon" :class="'lhc_b'+item.number">{{item.number}}</i>
                <div class="qiu" v-if="typeof (item.number) == 'object'" >
                    <i class="lhc_icon" v-for="(n,nIndex) in item.number" :class="'lhc_b'+n" :key="'i'+nIndex">{{n}}</i>
                </div>
            </td>
<!--            赔率-->
            <td :key="'b'+index" :data-id="item.id" :data-bet="item.bet" class="odds"
                v-if="showBet"
                @click="changeSelect(item.id,index)"
                @mouseover="handleMouseOver(index)"
                @mouseout="handleMouseOut(index)"
                :class="{'bg_yellow':item.selected,'hover':item.hovering}">
                <span class="c-txt3">{{item.bet}}</span>
            </td>
<!--            金额-->
            <td :key="'c'+index" :data-id="item.id" class="amount"
                v-if="showAmount"
                @click="changeSelect(item.id,index)"
                @mouseover="handleMouseOver(index)"
                @mouseout="handleMouseOut(index)"
                :class="{'bg_yellow':item.selected,'hover':item.hovering}">
                <input @click.stop="clickInput(item.id,index)" type="text" v-model="item.amount">
            </td>
<!--            多选框-->
            <td :key="'d'+index" :data-id="item.id" class="checkbox_td"
                v-if="showCheckbox"
                @click="changeSelect(item.id,index)"
                @mouseover="handleMouseOver(index)"
                @mouseout="handleMouseOut(index)"
                :class="{'bg_yellow':item.selected,'hover':item.hovering}">
                <input type="checkbox" v-model="item.selected">
            </td>
        </template>
    </tr>
</template>

<script>
    import {mapState} from "vuex";
    /**
     * 单行组件
     * @property row [
                         {id:23842,name:'',number:'01',bet:48.6,selected:false,hovering:false,amount:''},
                         {id:23843,name:'',number:'11',bet:48.6,selected:false,hovering:false,amount:''},
                         {id:23844,name:'',number:['31','44'],bet:48.6,selected:false,hovering:false,amount:''},
                         {id:23845,name:'',number:['31','44'],bet:48.6,selected:false,hovering:false,amount:''},
                         {id:23846,name:'',number:'41',bet:48.6,selected:false,hovering:false,amount:''}
                     ]
     * @property showName 是否显示名字
     * @property showNumbers 是否显示数字
     * @property showBet 是否显示赔率
     * @property showCheckbox 是否显示选项框
     * @property showAmount 是否显示金额
     * @property beforeSelect 选择前判断函数,必须返回Boolean值
     * @property afterSelect 选择后判断函数,必须返回Boolean值
     * */
    export default {
        name: "TrItem",
        props:{
            row:{
                type:Array,
                default(){
                    return[

                    ]
                }
            },
            /** 是否显示名字 **/
            showName:{
                type:Boolean,
                default:true
            },
            /** 是否显示数字 **/
            showNumbers:{
                type:Boolean,
                default:true
            },
            /** 是否显示赔率 **/
            showBet:{
                type:Boolean,
                default:true
            },
            /** 是否显示选项框 **/
            showCheckbox:{
                type:Boolean,
                default:false
            },
            /** 是否显示金额 **/
            showAmount:{
                type:Boolean,
                default:true
            },
            /** 选择前判断函数,必须返回Boolean值 */
            beforeSelect:{
                type:Function,
                default(){return true}
            },
            /** 选择后判断函数,必须返回Boolean值 */
            afterSelect:{
                type:Function,
                default(){return true}
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },
        methods:{
            changeSelect(id,columnIndex){

                if(!this.beforeSelect()){
                    return false
                }

                if (!this.row[columnIndex].selected) {
                    this.row[columnIndex].amount = this.betNumber
                } else {
                    this.row[columnIndex].amount = ''
                }
                this.row[columnIndex].selected = !this.row[columnIndex].selected

                if(!this.afterSelect()){
                    return false
                }
            },
            clickInput(id,columnIndex){
                if(!this.beforeSelect()){
                    return false
                }

                if (!this.row[columnIndex].selected) {
                    this.row[columnIndex].amount = this.betNumber
                    this.row[columnIndex].selected = true
                }

                if(!this.afterSelect()){
                    return false
                }

            },
            handleMouseOver(columnIndex){
                this.row[columnIndex].hovering = true
            },
            handleMouseOut(columnIndex){
                this.row[columnIndex].hovering = false
            }
        }
    }
</script>

<style scoped>

</style>